import React from 'react';
import { Table, Pagination, Button, Modal, Input, Form, Select } from 'antd';
import axios from 'axios'
import './foodList.css'
import { useState, useEffect } from "react";
const { Option } = Select;
export default function App() {
    let [shop, setshop] = useState()
    let [shops, setshops] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    let [arr, setarr] = useState([])
    let [arr1, setarr1] = useState([])
    let [records, setrecords] = useState({})
    let [Array, setArray] = useState([])
    let pages = 1
    const columns = [
        {
            title: '食品名称',
            dataIndex: 'name',
        },
        {
            title: '食品介绍',
            dataIndex: 'description',
        },
        {
            title: '评分',
            dataIndex: 'rating',
        },
        {
            title: '操作',
            dataIndex: '',
            render: (record) => <a><Button size='small' onClick={() => { showModal(record) }}>编辑</Button><Button type="primary" danger size='small'>删除</Button></a>,
        },
    ];
    const showModal = (record) => {
        setIsModalOpen(true);
        records = record
        setrecords(records)
        axios.get(`https://elm.cangdu.org/shopping/v2/menu/${record.category_id}`).then(res => {
                    console.log(res);
                    arr = res.data
                    setarr(arr)

                })
        axios.get(`https://elm.cangdu.org/shopping/v2/menu?restaurant_id=1&allMenu=true`).then(res=>{
            
            Array=Array.concat(res.data)
            setArray(Array)
            console.log(Array);
        })
        clk()
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    function onExpand(expanded, record) {
        console.log(expanded, record);
        if (expanded == true) {
            if (record.description != '') {
                axios.get(`https://elm.cangdu.org/shopping/v2/menu/${record.category_id}`).then(res => {
                    console.log(res);
                    arr = res.data
                    setarr(arr)
                })
            }
            axios.get(`https://elm.cangdu.org/shopping/restaurant/${record.restaurant_id}`).then(res => {
                console.log(res);
                arr1 = res.data
                setarr1(arr1)
            })
        }
    }
    useEffect(() => {
        axios.get('https://elm.cangdu.org/shopping/v2/foods/count?restaurant_id=undefined').then(res => {
            if (res.data.status == 1) {
                setshop(res.data.count)
            }
        })
        clk()
    }, []);
    function clk() {
        axios.get(`https://elm.cangdu.org/shopping/v2/foods?offset=${(pages - 1) * 20}&limit=20&restaurant_id=undefined`).then(res => {
            shops = res.data
            setshops([...shops])
        })

    }
    function change(page) {
        pages = page
        clk()
    }
    return <div className='main'>
        <Table
            columns={columns}
            pagination={false}
            rowKey={'item_id'}
            onExpand={onExpand}
            expandable={{
                expandedRowRender: (record) => (
                    <p
                        style={{
                            margin: 0,
                        }}
                        className='view'
                    >
                        <span>食品名称:{record.name}</span>
                        <span>餐馆名称:{arr1.name}</span>
                        <span>食品 ID:{record.item_id}</span>
                        <span>餐馆 ID:{record.restaurant_id}</span>
                        <span>食品介绍:{record.description}</span>
                        <span>餐馆地址:{arr1.address}</span>
                        <span>食品评分:{record.rating}</span>
                        <span>食品分类:{arr.name}</span>
                        <span>月销量:{record.month_sales}</span>
                    </p>
                ),
                rowExpandable: (record) => record.name !== 'Not Expandable',
            }}
            dataSource={shops}
        />
        <Pagination total={shop} showTotal={(shop) => `共${shop}条`}
            showSizeChanger={false} onChange={change} pageSize={shops.length} />
        <Modal title="修改食品信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText='确定' cancelText="取消" width='747px'>
            <Form>
                <Form.Item label="食品名称">
                    <Input value={shops.name} />
                </Form.Item>
                <Form.Item label="食品介绍" >
                    <Input value={shops.description} />
                </Form.Item>
                <Form.Item label="食品分类" className='a'>
                    <Select value={arr.description} allowClear>
                        {Array.map((i,index)=>{
                              return  <Option value={i.name} key={index}>{i.name}</Option>
                        })}
                        
                    </Select>
                </Form.Item>
                <Form.Item label="食品图片" >
                    <img src={'//elm.cangdu.org/img/' + shops.image_path} alt='' className='img' />
                </Form.Item>
            </Form>
        </Modal>
    </div>
}